<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>
    <style type="text/css">
        .panel, .flip, .flip_1 {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }

        .panel {
            padding: 50px;
            display: none;
        }
    </style>

    <script type="text/javascript">
        let display = 0;
        $(document).ready(function () {
            $(".flip").click(function () {
                if (display === 0) {
                    display = 1;
                    $(".panel").slideDown("slow");
                } else {
                    display = 0;
                    $(".panel").slideUp("slow");
                }
            })

            $(".flip_1").click(function () {
                $(".panel").slideToggle("slow");
            })
        })
    </script>

</head>
<body>
<div class="flip">点我，显示或者隐藏面板slideDown/slideUp</div>
<div class="panel">我是一个面板</div>
<div class="flip_1">点我，显示或者隐藏面板slideToggle</div>
</body>
</html>